<template>
  <div ref="canvas"></div>
</template>

<script lang="ts" setup>
import * as THREE from "three";
import Stats from "three/examples/jsm/libs/stats.module";
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";
import {ref, onMounted, render} from "vue";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import {MTLLoader} from "three/addons/loaders/MTLLoader.js";
import {OBJLoader} from "three/addons/loaders/OBJLoader.js";

const canvas = ref<any>();

const scene = new THREE.Scene();

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(0x000000);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight);
camera.position.set(50, 50, 50);
camera.lookAt(0, 15, 0);

const orbitControl = new OrbitControls(camera, renderer.domElement);
orbitControl.update();

const stat = Stats();

const keyLight = new THREE.SpotLight(0xffffff);
keyLight.position.set(0, 80, 80);
keyLight.intensity = 2;
keyLight.lookAt(new THREE.Vector3(0, 15, 0));
keyLight.castShadow = true;
keyLight.shadow.mapSize.height = 4096;
keyLight.shadow.mapSize.width = 4096;
scene.add(keyLight);

const backlight1 = new THREE.SpotLight(0xaaaaaa);
backlight1.position.set(150, 40, -20);
backlight1.intensity = 0.5;
backlight1.lookAt(new THREE.Vector3(0, 15, 0));
scene.add(backlight1);

const backlight2 = new THREE.SpotLight(0xaaaaaa);
backlight2.position.set(-150, 40, -20);
backlight2.intensity = 0.5;
backlight2.lookAt(new THREE.Vector3(0, 15, 0));
scene.add(backlight2);

const doRender = () => {
  stat.update();

  requestAnimationFrame(doRender);
  renderer.render(scene, camera);
};

const render = () => {
  canvas.value.appendChild(stat.domElement);
  canvas.value.appendChild(renderer.domElement);

  doRender();
};

const loader = new MTLLoader(undefined);
loader.load(
    new URL("@/assets/models/butterfly/butterfly.mtl", import.meta.url).href,
    (mat) => {
      mat.preload();
      new OBJLoader(undefined)
          .setMaterials(mat)
          .load(
              new URL("@/assets/models/butterfly/butterfly.obj", import.meta.url).href,
              (obj) => {
                // move wings to more horizontal position
                [0, 2, 4, 6].forEach(function (i) {
                  obj.children[i].rotation.z = 0.3 * Math.PI
                });

                [1, 3, 5, 7].forEach(function (i) {
                  obj.children[i].rotation.z = -0.3 * Math.PI
                });

                // configure the wings,
                const wing2 = obj.children[5];
                const wing1 = obj.children[4];

                wing1.material.opacity = 0.9;
                wing1.material.transparent = true;
                wing1.material.depthTest = false;
                wing1.material.side = THREE.DoubleSide;

                wing2.material.opacity = 0.9;
                wing2.material.depthTest = false;
                wing2.material.transparent = true;
                wing2.material.side = THREE.DoubleSide;

                obj.scale.set(140, 140, 140);

                obj.rotation.x = 0.2;
                obj.rotation.y = -1.3;

                scene.add(obj);

                render();
              },
              (e) => {
                console.log(' loader.load onProgress ', e, '\r\n ', ( e.loaded / e.total * 100 ) + '% loaded');
              },
              (err) => {
                console.error(' loader.load onError ', err);
              }
          )
    }
)

</script>
